<html>
  <head>
	<!-- Combo-handled YUI CSS files: -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/tabview/assets/skins/sam/tabview.css">
	  <!-- Combo-handled YUI JS files: -->
	  <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/imageloader/imageloader-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/tabview/tabview-min.js"></script>

	  <style type="text/css">
		body {
			background-color:#C9D0D6;
		}
		
		#MySpaceTabs {
			margin:4em auto;
			min-width:970px;
			width:74.6em;
		}
	  </style>
	</head>

	<body class="yui-skin-sam">

	  <% if @profile_data %>  
	  <div id="MySpaceTabs" class="yui-navset">
		<ul class="yui-nav">
		  <li id='profileTab' class="selected"><a href="#tab1"><em>Profile</em></a></li>
		  <li id='friendsTab'><a href="#tab2"><em>Friends</em></a></li>
		  <li id='albumsTab'><a href="#tab3"><em>Albums</em></a></li>
		</ul>            
		<div class="yui-content">
		  <div id='profileTabContent'>
            <p><%= image_tag(@profile_data['basicprofile']['image']) %></p> 
            <p>Profile URL : <%= link_to(@profile_data['basicprofile']['webUri']) %><p>
            <p>Name: <strong> <%= @profile_data['basicprofile']['name'] %> </strong> </p> 
            <p>Gender: <strong> <%= @profile_data['gender'] %> </strong> </p>
            <p>Age: <strong> <%= @profile_data['age'] %> </strong> </p>
            <p>Marital Status: <strong> <%= @profile_data['maritalstatus'] %> </strong> </p>
            <p>City: <strong> <%= @profile_data['city'] %> </strong> </p>
            <p>Postal Code: <strong> <%= @profile_data['postalcode'] %> </strong> </p>
            <p>Region: <strong> <%= @profile_data['region'] %> </strong> </p>
            <p>Country: <strong> <%= @profile_data['country'] %> </strong> </p>
		  </div>
		  <div id='friendsTabContent'>
			<% for friend in @friends_data['Friends'] %>
			  <% link_to(friend['webUri']) do %>
			  <img id='<%=friend['name']%>' title='<%= friend['name'] %>' border='0'/>
			  <% end %>
			<% end %>
		  </div>
		  <div id='albumsTabContent'>
            <p>Photos Content Here<p>
		  </div>
		</div>
	  </div>

	  <script type="text/javascript">
		var myTabs = new YAHOO.widget.TabView("MySpaceTabs");

		// Friends Tab Image Loader
		var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('friendsTab', 'mouseover');

	<% for friend in @friends_data['Friends'] %>
	tabTwoImageGroup.registerSrcImage('<%= friend['name'] %>', '<%= friend['image'] %>');
	<% end %>

	tabTwoImageGroup.addTrigger('friendsTab', 'focus');
	tabTwoImageGroup.name = 'tab_two_group';

	// Albums Tab Image Loader

	  </script>
	  <% end %>
	</body>
  </html>
